<template>
	<view class="login-wrapper">

		<!-- 切换环境提示 -->
		<EnvChangeTips ref="envChangeTipsRef" @change="vdata.siteInfos = storageManage.siteInfos()" />

		<view class="login-top">
			<text>欢迎回来，请登录</text>
			<image @tap="envChangeTipsRef.tapFunc()" style="width: 400rpx; height: 100rpx" src="/static/logo2.png" />
		</view>
		<view class="login-bottom jeepay-form">

			<!-- 不需要label, 需要修改： label-width="0"  -->
			<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">

				<view v-if="vdata.loginType == 'pwd' ">
					<uni-forms-item name="username">
						<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号"
							v-model="vdata.formData.username" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-user.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="pwd">
						<uni-easyinput class='jeepay-easyinput' :type="vdata.isShowPwd ? 'text' : 'password'"
							v-model="vdata.formData.pwd" :clearable="false" placeholder="请输入登录密码">
							<template #prefixIcon>
								<image src="@/static/login/icon-pw.svg" class="input-icon" />
							</template>
							<template #suffixIcon>
								<view class='show-tips' @tap="vdata.isShowPwd = !vdata.isShowPwd ">
									{{ vdata.isShowPwd ? '隐藏' : '显示'  }}</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item v-if="vdata.isShowSafetyCode" name="safetyCode">
						<uni-easyinput v-model="vdata.formData.safetyCode" type="number" class='jeepay-easyinput'
							placeholder="请输入安全码" :maxlength="6" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-pw.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>

				</view>

				<view v-if="vdata.loginType == 'sms' ">
					<uni-forms-item name="loginPhone">
						<uni-easyinput class='jeepay-easyinput' v-model="vdata.formData.loginPhone" type="number"
							:maxlength="11" :disabled="!vdata.allowSendMsgFlag" placeholder="请输入手机号" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-phone.svg" class="input-icon" />
							</template>
							<template #suffixIcon>
								<view class='show-tips' @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="smsCode">
						<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
						<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入手机验证码"
							v-model="vdata.formData.smsCode" :clearable="false">
							<template #prefixIcon>
								<image src="@/static/login/icon-sms-code.svg" class="input-icon" />
							</template>
						</uni-easyinput>
					</uni-forms-item>
				</view>

			</uni-forms>

			<view class="agreement-policy">
				<JeepayCheckbox v-model:checked="vdata.isSelectedAgreement" />
				同意
				<text class="agreement" @click="go.to('PAGES_STATIC_AGREEMENT')">《用户服务协议》</text>
				<text>与</text>
				<text class="policy" @click="toPrivacy">《隐私政策》</text>
			</view>

			<Button @tap="loginFunc">登录</Button>

			<view class="register-box">
				<view class="register">
					<text>还没有账号？</text> <text @tap="go.to('PAGES_REGISTER')">去注册></text>
				</view>
				<view class="forget" @tap="go.to('PAGES_FORGET_PASSWORD')">忘记密码</view>
			</view>
			<view class="swidth-login" @click="changeLoginType">
				{{ vdata.loginType == 'pwd' ? '短信验证码登录' : '账号密码登录' }}
				<image src="@/static/login/icon-arrow-left.svg"></image>
			</view>
		</view>
	</view>
	<JAgree service="PAGES_STATIC_AGREEMENT" privacy="PAGES_FORGET_PASSWORD" ref="refAgr"
		@agree="vdata.isSelectedAgreement = true" />
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		$loginByPwd,
		$phoneCodeLogin,
		$userInfo,
		$sendSms,
		$getSiteInfos,
		$getUploadImgSize
	} from '@/http/apiManager.js';
	import storageManage from '@/commons/utils/storageManage.js'
	import infoBox from '@/commons/utils/infoBox.js';
	import go from '@/commons/utils/go.js'
	import timer from '@/commons/utils/timer.js'
	import formUtil from '@/commons/utils/formUtil.js'
	import EnvChangeTips from './components/EnvChangeTips.vue'
	const loginFormRef = ref()
	const envChangeTipsRef = ref()
	const refAgr = ref()
	// #ifdef MP-WEIXIN
	// 控制 音乐播放 和暂停
	import {
		getPushStatus
	} from "@/commons/utils/pushmsg/wxTextToSpeach.js"
	// #endif
	const rules = {
		username: {
			rules: [formUtil.rules.requiredInputShowToast('用户名')],
		},
		pwd: {
			rules: [formUtil.rules.requiredInputShowToast('密码')],
		},
		safetyCode: {
			rules: [formUtil.rules.requiredInputShowToast('安全码')],
		},

		loginPhone: {
			rules: [formUtil.rules.requiredInputShowToast('手机号')],
		},

		smsCode: {
			rules: [formUtil.rules.requiredInputShowToast('短信验证码')],
		},
	}

	const vdata = reactive({

		isShowPwd: false, // 是否显示密码
		loginType: 'pwd', // 类型切换： pwd or sms
		isShowSafetyCode: false, // 是否显示安全码输入框
		allowSendMsgFlag: true, // 是否可发送短信验证码
		sendMsgText: '发送验证码',
		isSelectedAgreement: false, // 勾选隐私协议

		siteInfos: storageManage.siteInfos() || {},

		formData: {
			username: '', // 账密登录： 用户名
			pwd: '', // 账密登录： 密码
			safetyCode: '', // 账密登录： 安全码

			loginPhone: '', // 短信登录： 手机号 
			smsCode: '', // 验证码 
		},

	})

	onMounted(() => {

		// 查询是否包含网站信息， 否则更新
		if (!vdata.siteInfos || Object.keys(vdata.siteInfos) <= 0) {
			$getSiteInfos().then(({
				bizData
			}) => {
				vdata.siteInfos = storageManage.siteInfos(bizData)
			})
		}

	})


	// 切换登录方式
	function changeLoginType() {
		vdata.loginType = vdata.loginType == 'pwd' ? 'sms' : 'pwd';
	}


	function loginFunc() {



		// 表单验证 
		formUtil.validate(loginFormRef.value).then(() => {
			if (!vdata.isSelectedAgreement) {
				refAgr.value.open()
				return false
				//  return infoBox.showToast('请勾选用户隐私政策')
			}
			let loginPromise = null;

			if (vdata.loginType == 'pwd') { // 用户名密码登录 
				loginPromise = $loginByPwd(vdata.formData.username, vdata.formData.pwd, vdata.formData.safetyCode)

			} else if (vdata.loginType == 'sms') { // 短信验证码登录
				loginPromise = $phoneCodeLogin(vdata.formData.loginPhone, vdata.formData.smsCode)
			}

			if (loginPromise == null) {
				return false;
			}

			// 请求后的操作 
			loginPromise.then(({
				bizData
			}) => {

				if (bizData.isMFA) { // 需要 二次认证登录

					infoBox.showToast('请输入安全码')
					vdata.isShowSafetyCode = true
					return false;
				}

				// 登录成功
				loginFinishFunc(bizData)

			})
		})

	}
	const toPrivacy = () => {
		// #ifdef APP-PLUS
		go.to('PAGES_STATIC_POLICY')
		// #endif
		// 打开小程序隐私政策
		// #ifdef APP-PLUS
		wx.openPrivacyContract({
			fail: () => {
				uni.showToast({
					title: '打开失败请稍后重试', // 打开失败
					icon: 'none'
				})
			},
		})
		// #endif
	}
	// 封装登录成功后的操作
	async function loginFinishFunc(loginBizData) {

		// 保存 token
		storageManage.token(loginBizData.iToken)

		// 请求用户信息
		return $userInfo().then(({
			bizData
		}) => {
			console.log('userInf', bizData);
			// 保存用户数据
			storageManage.userInfo(bizData)
			// 存储上传 图片大小限制
			$getUploadImgSize().then(({
				bizData
			}) => {
				storageManage.uploadImgSize(bizData.applymentImgUploadSize)
			})
			// #ifdef MP-WEIXIN
			getPushStatus()
			// #endif
			// 跳转到首页
			go.to("PAGES_INDEX", {
				isGetCid: true
			}, go.GO_TYPE_RELAUNCH)

		})
	}

	// 点击发送验证码的函数 
	function sendSmscodeFunc() {
		// 按钮禁用
		if (!vdata.allowSendMsgFlag) {
			return false;
		}

		// 验证失败
		if (!formUtil.regexp.mobile.test(vdata.formData.loginPhone)) {
			return infoBox.showToast("请输入正确的手机号")
		}

		vdata.allowSendMsgFlag = false; // 按钮禁用 

		// 发送短信验证码
		$sendSms(vdata.formData.loginPhone, 'auth').then(({
			bizData
		}) => {
			infoBox.showSuccessToast('验证码发送成功')
			timer.startTimeoutTask(1, 60, (subTime) => {

				if (subTime <= 0) { // 任务结束
					vdata.sendMsgText = '发送验证码'
					vdata.allowSendMsgFlag = true;
					return false;
				}

				vdata.sendMsgText = `${subTime}s后可重新发送`
			})
		}).catch(() => {
			vdata.allowSendMsgFlag = true;
		})

	}
</script>

<style lang="scss">
	.login-wrapper {
		min-height: 100vh;
		background-color: $v-color-bgrey;

		.login-top {
			display: flex;
			flex-direction: column;
			height: 376rpx;
			padding: 176rpx 70rpx 0;
			box-sizing: border-box;
			background: url("/static/indexImg/user-bg.svg") center center no-repeat;
			background-size: cover;

			text:first-child {
				margin-bottom: 30rpx;
				font-size: 38rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
			}

			text:last-child {
				font-size: 50rpx;
				font-weight: 600;
				color: #48C0FF;
			}
		}

		.login-bottom {
			height: calc(100vh - 376rpx);
			padding: 50rpx;
			box-sizing: border-box;
			border-radius: 60rpx 60rpx 0 0;
			background-color: #fff;

			.show-tips {
				color: rgba(88, 132, 204, 1);
				font-weight: 400;
				font-size: 32rpx;
			}

			.agreement-policy {
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
				font-size: 26rpx;
				color: #8C8C8C;

				.select-box {
					display: flex;
					align-items: center;

					.select-img {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.agreement,
				.policy {
					color: #1D79FD;
				}
			}

			.register-box {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin-top: 50rpx;
				font-size: 26rpx;
				font-weight: 400;

				.register {
					text:last-child {
						color: #1D79FD;
					}
				}

				.forget {
					color: #1D79FD;
				}
			}

			.swidth-login {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 212rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(77, 77, 77, 1);

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>